<template>
	<view class="emtpy">
		<image src="../static/empty_bg.png" mode="" class="empty-img"></image>
		<text class="text">{{ message }}</text>
		<view class="empty_btn" v-if="showButton">
			<button type="default" @click="onReload">{{ buttonText }}</button>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 是否显示底部按钮
		showButton: {
			type: Boolean,
			default() {
				return true
			}
		},
		buttonText: {
			type: String,
			default() {
				return '重新登录'
			}
		},
		message: {
			type: String,
			default() {
				return '暂时还没有内容'
			}
		}
	},
	methods: {
		onReload() {
			this.$emit('onReload')
		}
	}
}
</script>

<style lang="less" scoped>
.emtpy {
	height: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	.empty-img {
		width: 306rpx;
		height: 306rpx;
	}
	.text {
		font-size: 28rpx;
		color: #666;
		padding-top: 32rpx;
		display: block;
	}
	
	.empty_btn {
		padding-top: 48rpx;
		button {
			border-radius: 36rpx;
			background-color: #2979ff !important;
			color: #fff;
			font-size: 28rpx;
			margin: 0 auto;
			width: 352rpx;
			height: 96rpx;
			line-height: 96rpx;
			opacity: 1;
			border-radius: 48rpx;
			font-size: 32rpx;
		}
	}
}
</style>
